<!doctype html>
<html>
  <head>
    <title>OSS in Browser</title>
    <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.min.css" />
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  </head>
  <body>
    <div id="main">
      <div class="page-header">
        <h1>OSS <small>in</small>Browser</h1>
      </div>
      <table>
        <tr>
          <td>
            <div class="panel panel-primary">
              <div class="panel-heading">Upload file</div>
              <div class="panel-body">
                <form action="" class="form-horizontal">
                  <div class="form-group">
                    <label>Select file</label>
                    <input type="file" id="file" />
                  </div>
                  <div class="form-group">
                    <label>Store as</label>
                    <input type="text" class="form-control" id="object-key-file" value="object" />
                  </div>
                  <div class="upload-operation">
                    <div class="form-group" style="float: left">
                      <input type="button" class="btn btn-primary" id="file-button" value="Upload" />
                    </div>
                    <div class="form-group" style="margin-left: 60px">
                      <input type="button" class="btn btn-primary" id="file-button-stop" value="Stop" />
                    </div>
                    <div class="progress">
                      <div
                        id="progress-bar"
                        class="progress-bar"
                        role="progressbar"
                        aria-valuenow="0"
                        aria-valuemin="0"
                        aria-valuemax="100"
                        style="min-width: 2em"
                      >
                        0%
                      </div>
                    </div>
                  </div>
                </form>
                <br />
              </div>
            </div>
          </td>

          <td>
            <div class="panel panel-success">
              <div class="panel-heading">Upload content</div>
              <div class="panel-body">
                <form action="" class="form-horizontal">
                  <div class="form-group">
                    <label>Content</label>
                    <textarea class="form-control" id="file-content" rows="3">Hello, OSS!</textarea>
                  </div>
                  <div class="form-group">
                    <label>Store as</label>
                    <input type="text" class="form-control" id="object-key-content" value="object" />
                  </div>
                  <div class="form-group">
                    <input type="button" class="btn btn-primary" id="content-button" value="Save" />
                  </div>
                </form>
              </div>
            </div>
          </td>
        </tr>
        <tr>
          <td>
            <div class="panel panel-success">
              <div class="panel-heading">Upload Blob</div>
              <div class="panel-body">
                <form action="" class="form-horizontal">
                  <div class="form-group">
                    <label>Content</label>
                    <textarea class="form-control" id="file-blob" rows="3">Hello, OSS! I am a Blob!</textarea>
                  </div>
                  <div class="form-group">
                    <label>Store as</label>
                    <input type="text" class="form-control" id="object-key-blob" value="blob" />
                  </div>
                  <div class="form-group">
                    <input type="button" class="btn btn-primary" id="blob-button" value="Save" />
                  </div>
                </form>
              </div>
            </div>
          </td>

          <td>
            <div class="panel panel-success">
              <div class="panel-heading">PUT Object with signaturedUrl</div>
              <div class="panel-body">
                <form action="" class="form-horizontal">
                  <div class="form-group">
                    <label>Content</label>
                    <textarea class="form-control" id="put-blob" rows="3">Hello, OSS! I am a Blob!</textarea>
                  </div>
                  <div class="form-group">
                    <label>Store as</label>
                    <input type="text" class="form-control" id="object-key-put-blob" value="blob" />
                  </div>
                  <div class="form-group">
                    <input type="button" class="btn btn-primary" id="put-blob-button" value="Save" />
                  </div>
                </form>
              </div>
            </div>
          </td>
        </tr>
        <tr>
          <td>
            <div class="panel panel-danger">
              <div class="panel-heading">Upload with base64 img</div>
              <div class="panel-body">
                <form action="" class="form-horizontal">
                  <div class="form-group">
                    <label>Base64 Content</label>
                    <textarea class="form-control" id="base64-file-content" rows="3">
</textarea
                    >
                  </div>
                  <div class="form-group">
                    <label>Store as</label>
                    <input type="text" class="form-control" id="base64-object-key-file" value="object" />
                  </div>
                  <div class="form-group">
                    <input
                      type="button"
                      class="btn btn-primary"
                      id="base64-file-button"
                      value="Upload"
                      style="float: left"
                    />
                    <div class="progress">
                      <div
                        id="base64-progress-bar"
                        class="progress-bar"
                        role="progressbar"
                        aria-valuenow="0"
                        aria-valuemin="0"
                        aria-valuemax="100"
                        style="min-width: 2em"
                      >
                        0%
                      </div>
                    </div>
                  </div>
                </form>
                <br />
              </div>
            </div>
          </td>
          <td>
            <div class="panel panel-warning">
              <div class="panel-heading">Download file</div>
              <div class="panel-body">
                <form action="" class="form-horizontal">
                  <div class="form-group">
                    <label>Object key</label>
                    <input type="text" class="form-control" id="dl-object-key" value="object" />
                  </div>
                  <div class="form-group">
                    <label>Save as</label>
                    <input type="text" class="form-control" id="dl-file-name" value="filename" />
                  </div>
                  <div class="form-group">
                    <input type="button" class="btn btn-primary" id="dl-button" value="Download" />
                  </div>
                </form>
              </div>
            </div>
          </td>
        </tr>
        <tr>
          <td>
            <div class="panel panel-info">
              <div class="panel-heading">List files</div>
              <div class="panel-body">
                <table class="table table-striped" id="list-files-table">
                  <tr>
                    <th>Key</th>
                    <th>Size</th>
                    <th>LastModified</th>
                  </tr>
                </table>
                <input type="button" class="btn btn-primary" id="list-files-button" value="Refresh" />
              </div>
            </div>
          </td>
          <td>
            <div class="panel panel-success">
              <div class="panel-heading">Custom Domain Usage</div>
              <div class="panel-body">
                <form action="" class="form-horizontal">
                  <div class="form-group">
                    <input type="text" class="form-control" id="key-cname" placeholder="Please Input Cname!" />
                    <label>object name to download</label>
                    <input type="text" class="form-control" id="key-cname-objectName" value="cnameObject" />
                    <div>
                      <input type="button" class="btn btn-primary" id="key-cname-button" value="Save" />
                    </div>
                  </div>
                </form>
              </div>
            </div>
          </td>
        </tr>
        <tr>
          <td colspan="2">
            Powered by
            <a href="https://www.aliyun.com/product/oss">OSS</a> &
            <a href="https://github.com/ali-sdk/ali-oss">ali-oss</a>
          </td>
        </tr>
      </table>
    </div>
  </body>
</html>
